<template>
  <div class="contarin">
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item,index) in banners" :key="index">
          <img :src="item.imageUrl" style="object-fit:cover; height:200px;" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐音乐 -->
    <div class="lists">
      <h2>推荐音乐</h2>
      <ul>
        <li v-for="(item ,index) in list" :key="index">
          <div class="lists-li">
            <img :src="item.picUrl" alt width="180px" />
            <span>{{item.name}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 最新 音乐-->
    <div class="songs">
      <h2>最新音乐</h2>
      <div class="songs_mian">
        <div
          v-for="(item,index) in songs"
          :key="index"
          class="songs_l"
          @click="playMusicClick(item.id,index)"
        >
          <img :src="item.picUrl" alt width="50px" />
          <p class="songs_p">
            <span>{{item.name}}</span>
            <span>{{item.song.artists[0].name}}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="recommendMv">
      <h2>推荐MV</h2>
      <div class="recommendMv_top">
        <div v-for="(item,index) in recommendMvs" :key="index" class="recommend_list">
          <div class="recommendMv_icon">
            <div>
              <span class="el-icon-video-play"></span>
            </div>
            <img :src="item.picUrl" alt width="230px" />
            <span class="el-icon-video-play">{{item.playCount}}</span>
          </div>
          <div class="recommendMv_text">
            <p>{{item.name}}</p>
            <p>{{item.artists[0].name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: null,
      list: null,
      songs: null,
      recommendMvs: null,
    };
  },
  methods: {
    // 获取轮播图数据函数
    bannerAxios() {
      this.$http({
        method: "get",
        url: "/banner",
      }).then((res) => {
        // 赋值到banners里面
        this.banners = res.data.banners;
      });
    },
    // 发现音乐
    musicAxios() {
      this.$http({
        method: "get",
        url: "/personalized",
        params: {
          limit: 10,
        },
      }).then((res) => {
        this.list = res.data.result;
      });
    },
    // 最新音乐
    LatestMusicAxios(val) {
      this.$http({
        method: "get",
        url: "/personalized/newsong",
      }).then((res) => {
        this.songs = res.data.result;
      });
    },
    // 播放音乐
    playMusicClick(id, index) {
      this.$http({
        method: "get",
        url: "/song/url",
        params: {
          id,
        },
      }).then((res) => {
        this.$parent.$parent.musicUrl = res.data.data[0].url;
        this.$parent.$parent.singname = this.songs[index].name;
      });
    },
    //推荐MV
    recommendAxios() {
      this.$http({
        method: "get",
        url: "/personalized/mv",
      }).then((res) => {
        this.recommendMvs = res.data.result;
      });
    },
  },
  created() {
    // 获取轮播图数据
    this.bannerAxios();
    //发现音乐
    this.musicAxios();
    // 最新音乐
    this.LatestMusicAxios();
    // 推荐音乐
    this.recommendAxios();
  },
};
</script>

<style lang="less" scoped>
.contarin {
  width: 1000px;
  margin: 0px auto;
  .banner {
    margin-top: 20px;
  }
  h2 {
    margin: 10px 0;
  }
  .lists {
    width: 100%;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        list-style-type: none;
        margin: 5px 10px;
        .lists-li {
          width: 180px;
          height: 205px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            display: block;
            margin-bottom: 5px;
            border-radius: 5px;
            border: none;
          }
          span {
            font-size: 15px;
          }
        }
      }
    }
  }
  .songs {
    width: 100%;
    .songs_mian {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      align-items: center;
      .songs_l {
        width: 50%;
        height: 50px;
        display: flex;
        margin: 5px 0px;
        cursor: pointer;
      }
      .songs_l:hover {
        background-color: #ccc;
      }
    }
    .songs_p {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      margin-left: 10px;
      font-size: 14px;
    }
  }
  .recommendMv {
    width: 100%;
    margin-bottom: 57px;
    .recommendMv_top {
      display: flex;
      justify-content: space-between;
      .recommend_list {
        width: 230px;
      }
      .recommendMv_icon {
        position: relative;
        span {
          position: absolute;
          color: #fff;
          top: 5px;
          right: 5px;
        }
        img {
          display: block;
        }
        div {
          height: 130px;
          width: 230px;
          position: absolute;
          background-color: rgba(255, 192, 203, 0.363);
          display: none;
          cursor: pointer;
          span {
            font-size: 18px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-10%, -40%);
          }
        }
      }
      .recommendMv_icon:hover div {
        display: block;
      }
      .recommendMv_text {
        width: 230px;
        padding: 2px 0px;
        p {
          display: block;
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>